<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/layouts/include/taglib.jsp" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />

 <script type="text/javascript">
    var prjId =  "${param.prjId}"; 	//项目id
    var prjType = "${param.prjType}"; //项目类型
    var stepId = "${param.stepId}";  //阶段id
    var taskId = "${param.taskId}";  //任务id
    var taskType = "${param.taskType}" //选中的任务类型
    	
 </script>
</head>

<body>
<div class ="row">
	<div class="row col-md-12" >
		<div class="widget-box">
			<div class="widget-header">
				<h4 class="lighter smaller">选择类型和模板</h4>
			</div>
			<!-- 章节id -->
			<input type="hidden" id="itemId">
			<div class="widget-body padding-8">
				<form class="form-horizontal padding-8" role="form" id="typeTp" method="post">
					<fieldset>
						
						<div class="form-group col-md-3 ">
						  	<label class="col-md-4 control-label no-padding-right" for="menuName">项目类型</label>
						  	<div class="col-md-8">
								<tags:select type="pmProjectType" name="prjType" id="prjType"></tags:select>
						  	</div>
						</div>
						<div class="form-group col-md-9 " id="doctp-prjtype">
						  	
							
							
							<div id="addMoreTp" class="col-md-3">
								<button class="btn btn-success btn-sm" id="addPmDocTp"><i class="icon-plus-sign"></i>添加更多</button>
							</div>
						  	
						</div>
					  	
						
					</fieldset>
					</form>
						
					
			</div>
		</div>
	</div>
	
	

	<div class="row col-md-12">
		<div class="col-md-4">
			<div class="widget-box">
				<div class="widget-header header-color-blue2">
					<h4 class="lighter smaller">文档结构树</h4>
				</div>

				<div class="widget-body">
					<div class="widget-main padding-8">
						<div id="buttons">
							<button class="btn btn-success btn-sm" onclick="addMenu();"><i class="icon-plus-sign"></i>新增</button>
							<button class="btn btn-danger btn-sm" onclick="delMenu();"><i class="icon-remove"></i>删除条目</button>
							<button class="btn btn-danger btn-sm" onclick="delTp();"><i class="icon-remove"></i>删除选中模板</button>
						</div>
						<div class="hr hr-18 dotted hr-double"></div>
						<div id="menuTree" class="ztree"></div>
					</div>
					
					<div class="form-actions center" id="stepCfgMaster">
						<button class="btn btn-sm btn-success" type="button">
							选择章节
						</button>
					</div>
				</div>
				
			</div>
			
		</div>
		<div class="col-md-8">
			<div class="widget-box">
				<div class="widget-header">
					<h4>文档目录详细设置</h4>
				</div>
				<div class="widget-body">
					<div class="widget-main no-padding">
						<form class="form-horizontal" role="form" id="menuEditForm" method="post">
							<fieldset>
								<div class="form-group sr-only">
								 	<label class="col-md-3 control-label" for="id">id</label>
								  	<div class="col-md-9">
										<input type="text" id="uuid" name="uuid" placeholder="ID" class="form-control">
										<input type="text" id="tpId" name="tpId" class="form-control" value=""/>
								  	</div>
								</div>
								
								<div class="form-group" style="display:none">
								  	<label class="col-md-3 control-label no-padding-right" for="parentId">父级目录名称</label>
								  	<div class="col-md-9">
										<select class="width-95 select2" id="parentId" name="parentId" data-placeholder="父级目录名称">
											
										</select>
								  	</div>
								</div>
								<!-- <div class="form-group">
								  	<label class="col-md-3 control-label no-padding-right" for="menuName">目录名称</label>
								  	<div class="col-md-9">
										<input type="text" id="menuName" name="menuName" placeholder="目录名称" class="form-control input-sm">
								  	</div>
								</div> -->
								<div class="form-group" style="display:none">
								  	<label class="col-md-3 control-label no-padding-right" for="docStyle">文档样式</label>
							  		<div class="col-md-9">
										<select class="width-95 select2" id="docStyle" name="docStyle" data-placeholder="文档样式">
											<option value="1">样式一</option>
											<option value="2">样式二</option>
											<option value="3">样式三</option>
											<option value="4">样式四</option>
											<option value="5">样式五</option>
											<option value="6">样式六</option>
										</select>
							  		</div>
								</div>
								<div class="form-group">
								  	<label class="col-md-3 control-label no-padding-right" for="title">目录标题</label>
								  	<div class="col-md-9">
										<input type="text" id="title" name="title" placeholder="目录标题" class="form-control input-sm">
								  	</div>
								</div>
								<!-- <div class="form-group">
								  	<label class="col-md-3 control-label no-padding-right" for="menuIco">菜单图标</label>
								  	<div class="col-md-9">
										<input type="text" id="menuIco" name="menuIco" placeholder="菜单图标" class="form-control input-sm">
								  	</div>
								</div> -->
								<div class="form-group">
								  	<label class="col-md-3 control-label no-padding-right" for="indexNo">排序序号</label>
								  	<div class="col-md-9">
										<input type="text" id="indexNo" name="indexNo" placeholder="排序序号" class="form-control input-sm">
								  	</div>
								</div>
								<div class="form-group" style="display:none">
								  	<label class="col-md-3 control-label no-padding-right" for="lvl">目录层次</label>
								  	<div class="col-md-9">
											<select class="width-95 select2" id="lvl" name="lvl" data-placeholder="目录层次">
												<option value="1">层次一</option>
												<option value="2">层次二</option>
												<option value="3">层次三</option>
												<option value="4">层次四</option>
												<option value="5">层次五</option>
												<option value="6">层次六</option>
											</select>
								  	</div>
								</div>
								<!-- <div class="form-group">
								  	<label class="col-md-3 control-label no-padding-right" for="menuTrip">目录说明</label>
								  	<div class="col-md-9">
										<input type="text" id="menuTrip" name="menuTrip" placeholder="目录说明" class="form-control input-sm">
								  	</div>
								</div> -->
							</fieldset>
							<div class="form-actions center">
								<button type="submit" class="btn btn-sx btn-success">
									<i class="icon-save icon-on-left"></i>保存
<!-- 									<i class="icon-arrow-right icon-on-right bigger-110"></i> -->
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="">
    <div class="col-xs-12">
        <div class="row">
            <div class="modal" style="display: none;" data-backdrop="false" id="addPmDocTpModen">
                <!-- class="modal fade" 添加效果 -->
                <div class="modal-dialog">
                    <div class="modal-content" style="width:300px;">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title">编辑文档模板</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" id="tpModen-form">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label no-padding-right" for="tpName">模板名称</label>

                                    <div class="col-sm-8">
                                       <input type="text" id="tpName" name="tpName" placeholder="模板名称" required="required"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label no-padding-right" for="selectPrjType">项目类型 </label>

                                    <div class="col-sm-8">
                                       <tags:select type="pmProjectType" name="prjType" id="selectPrjType"></tags:select>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="memberModen-btn-save">保存</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</div>
<div class="">
    <div class="col-xs-12">
        <div class="row">
            <div class="modal" style="display: none;" data-backdrop="false" id="editTpModen">
                <!-- class="modal fade" 添加效果 -->
                <div class="modal-dialog">
                    <div class="modal-content" style="width:300px;">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title">编辑文档模板</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" id="editTpName-form">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label no-padding-right" for="tpName">模板名称</label>

                                    <div class="col-sm-8">
                                    	<input type="hidden" id="editTpUuid" name ="uuid"/>
                                       <input type="text" id="editTpName" name="tpName" placeholder="模板名称" required="required"/>
                                    </div>
                                </div>
                                

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="editName-btn-save">保存</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</div>


<!-- tree  fuelux -->
<script src="${ctx}/static/ace/assets/js/fuelux/fuelux.tree.min.js"></script>
<script>
var menuTree,options;

var treeObj;
var treeNodes;

var setting = {
	check: {
		enable: false
	},
	data : {
		simpleData : {
			enable : true,
			idKey : "uuid",
			pIdKey : "parentId"
		}
	},
	async : {
		enable : true,
		url : "${ctx}/pm/doc/item/getAllChildItemList.do",
		type:"post",
		autoParam : ["uuid"],
		otherParam:["tpId" , ""],
		dataFilter : filter
	},
	view : {
		selectedMulti : false
	},
	callback : {
		onAsyncSuccess : zTreeOnAsyncSuccess,
		onClick : zTreeOnClick
	}
};

function filter(treeId, parentNode, childNodes) {
	if (!childNodes)
		return null;
	for (var i = 0, l = childNodes.length; i < l; i++) {
		if(childNodes[i].title != null) {
			childNodes[i].name = childNodes[i].title.replace(/\.n/g, '.');
		}
	}
	return childNodes;
};

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
	//treeObj.expandAll(true);
	/* var nodes = treeObj.transformToArray(treeObj.getNodes());
	for (var i = 0; i < nodes.length; i++) {
		var node = nodes[i];
		if (node.parentOrgNo == "" || node.parentOrgNo == "10099") {
			treeObj.expandNode(node);
		}
	} */
	//让页面滚动条定位到顶部
	document.documentElement.scrollTop = 0; //IE
	document.body.scrollTop = 0; //Firefox
};
function zTreeOnClick(event, treeId, treeNode) {
	
	//得到章节的id
	$("#itemId").val(treeNode.uuid);
	 getItemById(treeNode.uuid);
     $('#menuEditForm').data('bootstrapValidator').resetForm();//重置表单验证
};

//菜单保存验证选项配置 
options = {
		message: '信息填写不完整',
		submitHandler: function(validator, form, submitButton) {
			Otod.ajax({
				url:"${ctx}/pm/doc/item/save.do",
				data: form.serialize(),
				contentType: "application/x-www-form-urlencoded;",
				successFn: function(data){
					var selectedNodes = treeObj.getSelectedNodes();
					if(selectedNodes.length>0){
						treeObj.reAsyncChildNodes(selectedNodes[0].getParentNode(), "refresh");
					}else{
						treeObj.reAsyncChildNodes(null, "refresh");
					}
					resetForm();
					Otod.Msg.info(data.info);
                 }
			 });
        },
        fields: {
        	menuName:{
        		message:'菜单名称不能为空',
        		validators:{
        			notEmpty: {
                        message: '菜单名称不能为空'
                    }
        		}
        	},
        	menuUri:{
        		message:'菜单Uri不能为空',
        		validators:{
        			notEmpty: {
                        message: '菜单Uri不能为空'
                    }
        		}
        	},
        	menuOrder:{
        		message:'菜单顺序为数字',
        		validators:{
        			digits:{
        				message:'菜单顺序为数字',
        			}
        		}
        	}
        }
};

$("#parentId").on("change", function() { 
	if($("#parentId option:selected").val() == $("#uuid").val()){
		Otod.Msg.warn("不能选择自身作为父级，请重新选择！");
		$("#parentId").select2("val", "");
	}else{
	 $("#parentId").select2("val", $("#parentId option:selected").val());
	}
});

function resetForm(){
	var tpId = $("#tpId").val();
	$("#menuEditForm")[0].reset();
	$("#tpId").val(tpId);
	
}

$("#prjType").on("change", function() { 
	getDocTpByPrjType();
});

function getDocTpByPrjType(){
	Otod.ajax({
		url: ctx + '/pm/doc/item/getDocTpByPrjType.do',
		data: {
			prjType:$("#prjType").val()
			,initPrjType:"30010001"
		},
		contentType: "application/x-www-form-urlencoded;",
		successFn:function(data){
			$("#doctp-prjtype  .btn-pmdoctpmaster").remove();
			var template = $('#prjtype-doctp').html();
			Mustache.parse(template);
			var html = Mustache.render(template, {data:data});
			$("#doctp-prjtype").prepend(html);
			
			var tpId=$("#doctp-prjtype  .btn-doctpname:first-child").attr("valuekey");
			
			reloadTree(tpId);
		}
	 });
	
	
}

//加载父级下拉框  
function getMenuList(tpId){
	
	Otod.ajax({
		url:"${ctx}/pm/doc/item/getItemBytpId.do",
		data : {"tpId":tpId},
		contentType: "application/x-www-form-urlencoded;",
		successFn:function(data){
			var html = "<option value=''>"+"创建顶级目录"+"</option>";
			for(var i=0;i<data.length;i++){
				html =  html +  "<option value=\""+data[i].uuid+"\">"+data[i].title+"</option>";
			}
			$("#parentId").html(html);
		}
	 });
}

//菜单添加事件 
function addMenu(){
	//重置表单 
	resetForm();
	if(treeObj.getSelectedNodes().length>0){//如果有选中的节点，表单父菜单ID赋值 
		var options = $("#parentId option");
		
		 
			//$.each(options,function(index,item){
				//if(item.value == treeObj.getSelectedNodes()[0].uuid){
				//	 $("#parentId").select2("val", treeObj.getSelectedNodes()[0].uuid);
				//}
			//});
		
	}
}

//删除选中模板
function delTp(){
	var tpId = $("#tpId").val();
	Otod.ajax({
		url:"${ctx}/pm/doc/item/deleteByTpId.do",
		data : tpId,
		successFn:function(data){
			getDocTpByPrjType();
			reloadTree("");
			resetForm();
		}
	 });
}
//修改模板名称
function editTpName(uuid,tpName){
	
	$("#editTpName-form input[name='uuid']").val(uuid);
	$("#editTpName-form input[name='tpName']").val(tpName);
	showTpModal($("#editTpModen"));
}

//修改保存
$("#editName-btn-save").on('click',function(){
	
	if($("#editTpName").val()==""||$("#editTpName").val()==null){
		Otod.Msg.info("模板名称不能为空！");
		return;
	}
	
	Otod.ajax({
		url: ctx + '/pm/doc/item/savePmDocTp.do',
		data : {
			uuid :$("#editTpUuid").val(),
			tpName : $("#editTpName").val()
				},
		contentType: "application/x-www-form-urlencoded;",
		successFn : function(data) {
			
			Otod.Msg.info(data.info);
			$('#editTpModen').modal('hide');
			getDocTpByPrjType();
			
				
		}
	});
});

//菜单删除事件 
function delMenu(){
	var selectedItem = treeObj.getSelectedNodes();
	if(selectedItem.length <= 0){
		Otod.Msg.warn('请选择要删除的记录');
		return;
	}
	if(selectedItem[0].type == 'folder'){
		Otod.Msg.warn('此菜单含有子目录，请先删除子目录');
		return;
	}
	
	Otod.Msg.confirm("确定要删除该条目吗？", "删除条目",deleteItem);
	function deleteItem(){
		Otod.ajax({
			url:"${ctx}/pm/doc/item/deleteById.do",
			data: selectedItem[0].uuid,
			successFn: function(data){
				treeObj.removeNode(selectedItem[0]);
	            Otod.Msg.info(data.info);
	            resetForm();
			}
		});
	}
	
	
}

//菜单查询事件：根据菜单ID查询菜单详细信息
function getItemById(id){
	Otod.ajax({
		url:"${ctx}/pm/doc/item/getItemById.do",
		data:id,
		successFn: function(data){
			 	for(var d in data){
					 if($("#"+d).is('select')){
						 $("#"+d).select2("val",data[d]); 
						 $("#parentId").select2("val", data.parentId);
					 }else{
					 	$("#"+d).val(data[d]);
					 };
			 	};
		}
	 });
}

//显示添加文档模板
$("#addPmDocTp").on('click',function(e){
	showTpModal($("#addPmDocTpModen"));
	
	return false;
});

//显示model
function showTpModal(modal){
	var modalObj = getJqueryObj(modal);
	modalObj.modal();
}

//显示modal
function showModalFollowRight(btn,modal){
	var modalObj = getJqueryObj(modal);
	var btnObj = getJqueryObj(btn);
	
	modalObj.modal();
	setModelFollowRight(modalObj,"500px");
}

function showModal(btn,modal){
	var modalObj = getJqueryObj(modal);
	var btnObj = getJqueryObj(btn);
	
	modalObj.modal();
	setModelFlowBtn(modalObj.children(".modal-dialog").get(0),btnObj.get(0),"fixed");
}

//获得jquery 对象
function getJqueryObj(obj){
	var jObj;
	if (obj.jquery) {
		jObj = obj;
	}else if(obj instanceof HTMLElement){
		jObj = $(obj);
	}else{
		jObj = $("#"+obj);
	}
	return jObj;
}

//人员保存
$("#memberModen-btn-save").on('click',function(){
	
	if($("#tpName").val()==""||$("#tpName").val()==null){
		Otod.Msg.info("模板名称不能为空！");
		return;
	}
	
	Otod.ajax({
		url: ctx + '/pm/doc/item/savePmDocTp.do',
		data : {
			tpName :$("#tpName").val(),
			prjType : $("#selectPrjType").val()
				},
		contentType: "application/x-www-form-urlencoded;",
		successFn : function(data) {
			
			Otod.Msg.info(data.info);
			$('#addPmDocTpModen').modal('hide');
			getDocTpByPrjType();
			
				
		}
	});
});

$("#doctp-prjtype").on('click',".btn-doctpname",function(e){
	e.preventDefault();
	/*  Otod.ajax({
		url: ctx + '/pm/doc/item/getItemBytpId.do',
		data : {
			tpId : $(this).attr("valuekey"),
				},
		contentType: "application/x-www-form-urlencoded;",
		successFn : function(data) {
			alert(data.length);
		}
	}); */
	
	reloadTree($(this).attr("valuekey"));
});



//重新加载树
function reloadTree(tpId){
	$("#tpId").val(tpId);
	
	treeObj.setting.async.otherParam = ["tpId" , tpId];
	
	treeObj.reAsyncChildNodes(null, "refresh");
	
	
	getMenuList(tpId);
}

/**
 * 保存选择的章节
 */

function saveItem(){
	
	if($("#itemId").val()==null||$("#tpId").val()==""){
		Otod.Msg.info("请选择具体章节");
		return;
	}

	Otod.ajax({
		 url:ctx+"/pm/doc/saveItemMaster.do",
		 data:{taskType:taskType,stepId:stepId,itemId:$("#itemId").val(),taskId:taskId,masterId:$("#tpId").val(),parentId:""},
		 type:"POST",
		 contentType: "application/x-www-form-urlencoded",
		 successFn:function(data){
			 //保存成功跳回页面			
			 window.location.href="${ctx}/jsp/pm/prj/stepCfg.jsp?prjId="+prjId;
		 }	
	}); 
}

$(document).ready(function() {
		$("#stepCfgMaster").hide();
		//新增 long
		if(prjId!=""&&prjType!=""&&stepId!=""){
			//设置项目类型为不可改动
			$("#prjType").val(prjType);
			//如果这种设置后台娶不到值
			$("#prjType").attr("disabled","true");
			$("#stepCfgMaster").show();
			$("#stepCfgMaster button").on("click",function(e){
			
				saveItem();
			})
		}
		
		
		//菜单节点选中事件 
		$('#menuTree').on('selected', function (evt, data) {
	        //加载表单信息
	        getMenuById(treeObj.getSelectedNodes()[0].uuid);
	        $('#menuEditForm').data('bootstrapValidator').resetForm();//重置表单验证
	    });
		
		
		//父节点关闭事件 
		$('#menuTree').on('closed', function (evt, data) {
			$('div.tree-folder-header.tree-selected').removeClass('tree-selected');
		});
		
		//初始化下拉控件
		$(".select2").select2(); 
		
		//验证
		$('#menuEditForm').bootstrapValidator(options);
		treeObj = $.fn.zTree.init($("#menuTree"), setting);
		
		getDocTpByPrjType();
		
		
		 
		
	});
</script>

<!-- 生成当前项目类型文档模板列表-->
<script id="prjtype-doctp" type="x-tmpl-mustache">
		{{#data}}
			<div id="buttons{{uuid}}" class="col-md-3 btn-pmdoctpmaster">
				<button class="btn btn-success btn-sm btn-doctpname" valuekey="{{uuid}}"><i class="icon-plus-sign"></i>{{tpName}}</button>
				<a  href="javascript:editTpName('{{uuid}}','{{tpName}}')" title='修改'><i class="icon-pencil bigger-130"></i></a>
			</div>
		{{/data}}
</script>



</body>
</html>